<script setup lang="ts">
import { ref } from 'vue';
import { buildAssetSource } from '@/utils';

withDefaults(defineProps<{
  current?: number
}>(), {
  current: 1
});

const steps = ref([
  '选择科室',
  '选择医生',
  '选择时段',
  '确认挂号',
  '缴纳费用',
  '挂号成功'
]);
</script>

<template>
  <view class="registration-steps flex-center">
    <view class="box-border w-full flex items-center justify-between px-60">
      <template v-for="(item, index) in steps" :key="index">
        <view class="steps-item" :class="{ 'steps-item--active': index + 1 === current }">
          <view class="flex-center flex-col">
            <view class="steps-item__number">
              <image v-if="index + 1 < current" :src="buildAssetSource('check.png')" class="h-36 w-51" />
              <text v-else>
                {{ index + 1 }}
              </text>
            </view>
            <view class="steps-item__title mt-20">
              {{ item }}
            </view>
          </view>
        </view>
        <view v-if="index < steps.length - 1" class="steps-item__arrow mb-55">
          <image :src="buildAssetSource('arrow.png')" class="h-30 w-30" />
        </view>
      </template>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.registration-steps {
  background: rgba(247, 250, 254, 0.3);
  height: 285px;
}

.steps-item__number {
  @apply flex-center;
  width: 85px;
  height: 85px;
  font-size: 38px;
  color: #5c6978;
  background: #b6d6ff;
  border-radius: 50%;
}

.steps-item__title {
  font-size: 32px;
  color: var(--text-color);
}

.steps-item {
  @apply flex-center;
  &.steps-item--active {
    .steps-item__number {
      font-size: 48px;
      font-weight: bold;

      color: #ffffff;
      background: var(--primary);
    }
    .steps-item__title {
      font-weight: bold;
    }
  }
}
</style>
